<template>
  <div style="width: 60%; margin: 0 auto">
    <el-card>
      <div slot="header" class="clearfix">
        <span>实验列表</span>
        <el-button type="primary" style="float: right; padding: 3px 0" @click="showAddExpr"
          >新增实验</el-button
        >
      </div>
      <!-- 实验列表 -->
      <div v-for="expeInfo in expeInfoList" :key="expeInfo.id" class="expr">
        <!-- 标题 -->
        <div>
          <label class="title" @click="showInfo(expeInfo)">
            <el-link type="primary">{{ expeInfo.name }}</el-link>
            </label
          ><label>{{ expeInfo.time }}</label>
        </div>
        <!-- 摘要 -->
        <div style="margin-top: 20px; margin-bottom: 20px">
          <label>{{ expeInfo.summary }}</label>
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 实验信息列表
      expeInfoList: [],
      pageSize: 10,
      pageNum: 1,
    };
  },
  methods: {
    // 发送请求，获取实验信息列表
    getExpeInfo() {
      this.$http({
        url:
          "experiment/list?pageSize=" +
          this.pageSize +
          "&pageNum=" +
          this.pageNum,
        method: "get",
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.expeInfoList = response.data.data.data;
          }
        })
        .catch((err) => err);
    },
    // 切换到新增实验
    showAddExpr() {
      this.$router.push("/addExpr").catch((err) => err);
    },
    // 显示详情页
    showInfo(data) {
      this.$router
                .push({ path: "/exprInfo", query: { id: data.id } })
                .catch(err => err);
    }
  },
  mounted() {
    this.getExpeInfo();
  },
};
</script>

<style>
.expr {
  margin-bottom: 30px;
}
.expr .title {
  font-size: 30px;
  color: black;
  margin: 10px 10px;
}
</style>